<template>
    <div class="main">
        <Form ref="data" :model="data" :rules="ruleValidate" label-position="top" :label-width="0">
            <Card :bordered="false">
                <h3 style="text-align:center;color:#409EFF">XXXXX后台登陆</h3>
            </Card>
            <Card :bordered="false">
                <FormItem label="Username" prop="username">
                    <Input v-model="data.username" autocomplete="off"></Input>
                </FormItem>
            </Card>
            <Card :bordered="false">
                <FormItem label="Password" prop="password">
                    <Input type="password" v-model="data.password"></Input>
                </FormItem>
            </Card>
            <Card :bordered="false" >
                <FormItem>
                    <Button long type="primary" @click="handleSubmit('data')">Signin</Button>
                </FormItem>
            </Card>
        </Form>
    </div>
</template>

<script>
import '@/style/bg.scss'
export default {
    data(){
        return{
            data:{
                username:"",
                password:""
            },
            ruleValidate: {
                    username: [
                        { required: true, message: '用户名不能为空', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' }
                    ]
            }
        }
    },
    methods:{
        handleSubmit(name){
            this.$refs[name].validate((valid) => {
                    if (valid) {
                       this.$store.dispatch("Login",this.data).then(()=>{
                            if(this.$store.state.login.msg=="success"){
                                this.$router.push({path: '/'})
                            }else{
                                this.$Message.error('账户或者密码错误!');
                            }
                        });
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
        },
        mounted(){
            
        }
    }
}
</script>

<style lang="scss" scoped>
    .main{
        width:300px;
        height: 400px;
        background:rgba($color: #000000, $alpha: 0.4);
        box-shadow: 6px 4px 13px 1px #000000;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        .ivu-card{
            background: transparent;
         }
        }
</style>
